<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/layouts/conMenuLayout.xhtml">

	<ui:define name="title">
		<h:outputText value="#{msg.cabecera_title}" />
	</ui:define>
				
	<ui:define name="content">
		
			
		
		<h:form id="datosLecturas">  
		<h:panelGroup layout="block" styleClass="bloqueMensajes">
			<p:messages>
			</p:messages>
		</h:panelGroup>
			<h:panelGroup layout="block" class="bloqueCentralDatos">			
					
					
					
					<fieldset>
						<legend><h:outputText value="&nbsp;&nbsp;#{msg.field_lectura}&nbsp;&nbsp;" /></legend>
						
						
						<h:panelGrid id="facturaPanel" columns="4" styleClass="porcen100" width="100%" columnClasses="porcen15,porcen35,porcen15,porcen35" >
							<f:facet name="header">  
						        Nueva Lectura
						    </f:facet>  
						    <h:outputLabel value="Propietario:*"/>
									<p:selectOneMenu id="propietario" value="#{flowScope.lectura.propietario.id}" styleClass="porcen100">
										<f:selectItems itemValue="#{propietario.id}" var="propietario" itemLabel="#{propietario.piso} - #{propietario.nombre}"	value="#{flowScope.propietarios}"/>
									</p:selectOneMenu>
						  	
						  	<h:outputLabel for="fecha" value="Fecha: " />
						  	<p:calendar readOnlyInputText="true" navigator="true" id="fecha" locale="#{locale}" maxlength="10" pattern="dd/MM/yyyy" 
	   											value="#{lectura.fecha}" showOn="button" inputStyleClass="porcen70"  timeZone="CET" />

							<h:outputLabel for="consumo" value="Paso contador: " />  
						    <p:inputText id="consumo" value="#{flowScope.lectura.consumo}" label="Consumo m3"/>  
						  
						    <f:facet name="footer">  
						    	
						        <p:commandButton id="botonInsertar" value="#{msg.botonera_guardar}" title="#{msg.botonera_guardar}" action="insertarLectura" ajax="false" />  
						    </f:facet>   
						 
						</h:panelGrid>
					
					</fieldset>
					
					<p:separator/>
					
					<h:panelGroup layout="block" styleClass="separacionVertical"/>
										
					<fieldset>
						<legend><h:outputText value="&nbsp;&nbsp;#{msg.field_lecturas}&nbsp;&nbsp;" /></legend>
												
						<p:dataTable var="varLectura" value="#{flowScope.lecturas}" styleClass="centrarTextos" paginator="true" rows="20"  id="tablaLecturas"
		                emptyMessage="#{msg.mensaje_sinResultados}" 
		                rowIndexVar="rowIndex" paginatorPosition="top" paginatorTemplate=" Elementos por página {RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}" 
                 		rowsPerPageTemplate="10,20,30" rowStyleClass="#{rowIndex%2 == 0 ? 'colorFilaPar' : 'colorFilaImpar'}">
		  				
			  			    <p:column sortBy="#{varLectura.propetario.piso}" >  
					            <f:facet name="header">  
						            <h:outputText value="#{msg.lectura_propietario}" styleClass="tamanioLetraPequenio"/>
					            </f:facet>  
					             
					            <h:outputText value="#{varLectura.propietario.piso} - #{varLectura.propietario.nombre}" styleClass="tamanioLetraPequenio"/> 
					       </p:column>
					       <p:column sortBy="#{varLectura.fecha}" >  
					            <f:facet name="header">  
						            <h:outputText value="#{msg.lectura_fecha}" styleClass="tamanioLetraPequenio"/>
					            </f:facet>  
					             
					            <h:outputText value="#{varLectura.fecha}" styleClass="tamanioLetraPequenio"> 
					            	<f:convertDateTime pattern="dd/MM/yyyy" timeZone="CET"></f:convertDateTime>
					            </h:outputText>
					       </p:column>
					       <p:column sortBy="#{varLectura.consumo}" >  
					            <f:facet name="header">  
						            <h:outputText value="#{msg.lectura_consumo}" styleClass="tamanioLetraPequenio"/>
					            </f:facet>  
					             
					            <h:outputText value="#{varLectura.consumo}" styleClass="tamanioLetraPequenio"/> 
					       </p:column>
				      				       
					        <f:facet name="footer">  
					            <h:outputText value="#{msg.mensaje_tabla_obtenidos} #{fn:length(flowScope.lecturas)} #{msg.mensaje_tabla_registro}" styleClass="tamanioLetraPequenio"/>
					        </f:facet>
				   	 	</p:dataTable> 
					</fieldset>
    			</h:panelGroup>
    	
    	
    	    	
	</h:form>  
		
		
	</ui:define>

</ui:composition>

</html>
